<template>
  <a-row :gutter="[12, 0]" class="px-[12px] pt-2 a-row-box">
    <a-col :span="6" class="flex flex-col">
      <Card title="新生儿概况" :desc="''" class="flex flex-col">
        <template #desc>
          <span @click="opanDetail('新生儿概况')" style="color: #55b8c1; cursor: pointer"
            >（查看明细）
          </span>
          <div class="flex flex-row">
            <a-select
              v-model:value="xsrgk.year"
              :options="utils.genSelectOptions('year')"
              @change="loadDataByXsrgk(false)"
              size="small"
            />
            <a-select
              class="ml-1"
              v-model:value="xsrgk.quarter"
              :options="utils.genSelectOptions('quarter')"
              @change="loadDataByXsrgk(false)"
              size="small"
            />
          </div>
        </template>
        <div v-show="xsrgk.lastYear" class="flex mt-2 mb-2 justify-around">
          <div class="text-center w-[150px]">
            <span class="block text-md mb-[4px]">
              {{ utils.numberToChinese(xsrgk.lastQuarter) }}季度新生儿数量
            </span>
            <NumberAnimation :value="xsrgk.childCount" unit="人" class="block text-2xl font-bold">
              <template #suffix></template>
            </NumberAnimation>
          </div>
          <div class="text-center w-[150px]">
            <span class="block text-md mb-[4px]">同比增幅</span>
            <span v-if="xsrgk.year1yearRate > 0" class="block text-2xl font-bold">
              <span class="valueNum-zf">+{{ xsrgk.year1yearRate }}</span>
              <span class="unit">
                {{ xsrgk.year1yearRate == '/' ? '' : '%' }}
              </span>
            </span>
            <span v-else class="block text-2xl font-bold"
              ><span class="valueNum-zf">{{ xsrgk.year1yearRate }}</span>
              <span class="unit"> {{ xsrgk.year1yearRate == '/' ? '' : '%' }}</span></span
            >
          </div>
          <div class="text-center w-[150px]">
            <span class="block text-md mb-[4px]">环比增幅</span>
            <span v-if="xsrgk.quarter2quarterRate > 0" class="block text-2xl font-bold">
              <span class="valueNum-zf">+{{ xsrgk.quarter2quarterRate }}</span>
              <span class="unit">{{ xsrgk.quarter2quarterRate == '/' ? '' : '%' }}</span>
            </span>
            <span v-else class="block text-2xl font-bold">
              <span class="valueNum-zf">{{ xsrgk.quarter2quarterRate }}</span>
              <span class="unit">{{ xsrgk.quarter2quarterRate == '/' ? '' : '%' }}</span>
            </span>
          </div>
        </div>
        <div v-show="xsrgk.lastYear" class="flex justify-around mb-2">
          <div class="text-center w-[150px]">
            <span class="block text-md mb-[4px]">年度新生儿数量</span>
            <NumberAnimation
              :value="xsrgk.yearChildCount"
              unit="人"
              class="block text-2xl font-bold"
            >
              <template #suffix></template>
            </NumberAnimation>
          </div>
          <div class="text-center w-[150px]">
            <span class="block text-md mb-[4px]">同比增幅</span>
            <span v-if="xsrgk.year2yearRate > 0" class="block text-2xl font-bold">
              <span class="valueNum-zf">+{{ xsrgk.year2yearRate }}</span>
              <span class="unit">{{ xsrgk.year2yearRate == '/' ? '' : '%' }}</span>
            </span>
            <span v-else class="block text-2xl font-bold">
              <span class="valueNum-zf">{{ xsrgk.year2yearRate }}</span>
              <span class="unit">{{ xsrgk.year2yearRate == '/' ? '' : '%' }}</span>
            </span>
          </div>
          <div class="text-center w-[150px]"></div>
        </div>
        <MyDivider />
        <div class="flex-1 flex flex-col">
          <div class="h-[50%] flex-1 flex flex-col">
            <div id="xsrgkByXbbl" class="w-full flex-1 mx-auto"></div>

            <!-- <div id="xsrgkByQyzb" class="w-full flex-1 mx-auto my-[12px] px-4"></div> -->
          </div>

          <MyDivider />

          <div id="xsrgkByZs" class="w-full h-[45%] mx-auto"></div>
        </div>
      </Card>
    </a-col>
    <a-col :span="6" class="flex flex-col pb-[50px]">
      <Card title="在读小学生概况" :desc="zdxxsgk.desc" class="flex flex-col">
        <template #desc>
          <span @click="opanDetail('在读小学生概况')" style="color: #55b8c1; cursor: pointer"
            >（查看明细）
          </span>
          <a-select
            v-model:value="zdxxsgk.year"
            :options="utils.genSelectOptions('year')"
            @change="loadDataByXxsgk(false)"
            size="small"
          />
        </template>
        <div class="flex justify-around">
          <div class="text-center w-[150px]">
            <span class="text-md block"> 在读小学生总数 </span>
            <NumberAnimation :value="zdxxsgk.totalCount" unit="人" class="text-2xl font-bold block">
              <template #suffix></template>
            </NumberAnimation>
          </div>
          <div class="text-center w-[150px]">
            <span class="text-md block">同比增幅</span>
            <span v-if="zdxxsgk.year2yearRate > 0">
              <span class="valueNum-zf">+{{ zdxxsgk.year2yearRate }}</span>
              <span class="unit">{{ zdxxsgk.year2yearRate == '/' ? '' : '%' }}</span>
            </span>
            <span v-else class="text-2xl font-bold block">
              <span class="valueNum-zf">{{ zdxxsgk.year2yearRate }}</span>
              <span class="unit">{{ zdxxsgk.year2yearRate == '/' ? '' : '%' }}</span></span
            >
          </div>
        </div>
        <div id="zdxxsgkgnjzbzrs" class="w-full h-full flex-1"></div>

        <div id="zdxxsgknnbl" class="w-full h-full flex-1"></div>

        <div id="zdxxsgk" class="w-full h-full flex-1"></div>
      </Card>
    </a-col>

    <a-col :span="6" class="flex flex-col pb-[50px]">
      <Card title="企业数据" desc="" class="flex flex-col">
        <template #desc>
          <span @click="opanDetail('企业数据')" style="color: #55b8c1; cursor: pointer"
            >（查看明细）
          </span>
          <div class="flex flex-row">
            <a-select
              v-model:value="gsygqk.year"
              :options="utils.genSelectOptions('year')"
              @change="loadDataByGsygqk(false)"
              size="small"
            />
            <a-select
              class="ml-1"
              v-model:value="gsygqk.month"
              :options="utils.genSelectOptions('month')"
              @change="loadDataByGsygqk(false)"
              size="small"
            />
          </div>
        </template>
        <div class="col-span-10 flex flex-col gap-10">
          <div class="flex flex-col">
            <!-- “四上”企业用工总数 -->
            <div class="flex mt-2 mb-2 justify-around">
              <div class="text-center w-[200px]">
                <span class="block text-md mb-[4px]"> “四上”企业用工总数 </span>
                <NumberAnimation
                  unit="人"
                  :value="gsygqk.count.ygCount"
                  class="block text-2xl font-bold"
                >
                  <template #suffix></template>
                </NumberAnimation>
              </div>
              <div class="text-center w-[150px]">
                <span class="block text-md mb-[4px]">同比增幅</span>
                <span class="block text-2xl font-bold">
                  <span class="valueNum-zf">{{
                    gsygqk.count.ygCountTb ? gsygqk.count.ygCountTb : '/'
                  }}</span>
                  <span class="unit">{{ gsygqk.count.ygCountTb ? '%' : '' }}</span>
                </span>
              </div>
              <div class="text-center w-[150px]">
                <span class="block text-md mb-[4px]">环比增幅</span>
                <span class="block text-2xl font-bold">
                  <span class="valueNum-zf">{{
                    gsygqk.count.ygCountHb ? gsygqk.count.ygCountHb : '/'
                  }}</span>
                  <span class="unit">{{ gsygqk.count.ygCountHb ? '%' : '' }}</span>
                </span>
              </div>
            </div>
            <!-- “四上”企业数 -->
            <div class="flex mt-2 mb-2 justify-around">
              <div class="text-center w-[200px]">
                <span class="block text-md mb-[4px]"> “四上”企业数 </span>
                <NumberAnimation
                  unit="家"
                  :value="gsygqk.count.qyCount"
                  class="block text-2xl font-bold"
                >
                  <template #suffix></template>
                </NumberAnimation>
              </div>
              <div class="text-center w-[150px]">
                <span class="block text-md mb-[4px]">同比增幅</span>
                <span class="block text-2xl font-bold">
                  <span class="valueNum-zf">{{
                    gsygqk.count.qyCountTb ? gsygqk.count.qyCountTb : '/'
                  }}</span>
                  <span class="unit">{{ gsygqk.count.qyCountTb ? '%' : '' }}</span>
                </span>
              </div>
              <div class="text-center w-[150px]">
                <span class="block text-md mb-[4px]">环比增幅</span>
                <span class="block text-2xl font-bold">
                  <span class="valueNum-zf">{{
                    gsygqk.count.qyCountHb ? gsygqk.count.qyCountHb : '/'
                  }}</span>
                  <span class="unit">{{ gsygqk.count.qyCountHb ? '%' : '' }}</span>
                </span>
              </div>
            </div>
          </div>
        </div>

        <MyDivider />

        <div id="qyygzs1" class="w-full flex-1"></div>
        <div id="qyygzs2" class="w-full flex-1"></div>
        <div id="qyygzs3" class="w-full flex-1"></div>
      </Card>
    </a-col>
    <a-col :span="6" class="flex flex-col">
      <Card title="公铁航客运数据" :desc="hkysj.desc" class="flex flex-col">
        <template #desc>
          <div class="flex flex-row">
            <a-select
              v-model:value="gthsj.year"
              :options="utils.genSelectOptions('year')"
              @change="loadDataByGthsj(false)"
              size="small"
            />
            <a-select
              class="ml-1"
              v-model:value="gthsj.month"
              :options="utils.genSelectOptions('month')"
              @change="loadDataByGthsj(false)"
              size="small"
            />
          </div>
        </template>
        <div
          class="grid grid-cols-3 text-center"
          style="cursor: pointer"
          v-for="(v, i) in gthzflist"
          :key="i"
          @click="opanDetail(v.name)"
        >
          <div>
            <span class="block text-md mb-[4px]"> {{ v.name }} </span>
            <NumberAnimation
              :value="v.kylCount"
              :unit="v.name == '公路' ? '万人' : '人'"
              class="block text-2xl font-bold"
            >
              <template #suffix></template>
            </NumberAnimation>
          </div>
          <div>
            <span class="block text-md mb-[4px]">同比增幅</span>
            <span class="block text-2xl font-bold">
              <span class="valueNum-zf">{{ v.tb ? v.tb : '/' }}</span>
              <span class="unit">{{ v.tb ? '%' : '' }}</span>
            </span>
          </div>
          <div>
            <span class="block text-md mb-[4px]">环比增幅</span>
            <span class="block text-2xl font-bold">
              <span class="valueNum-zf">{{ v.hb ? v.hb : '/' }}</span>
              <span class="unit">{{ v.hb ? '%' : '' }}</span>
            </span>
          </div>
        </div>

        <!-- <div class="flex flex-row w-full flex-1"> -->
        <div id="glsj" class="w-full flex-1"></div>
        <div id="tlsj" class="w-full flex-1"></div>
        <div id="hksj" class="w-full flex-1"></div>
        <!-- </div> -->

        <!-- <div id="lkzlChart" class="w-full flex-1"></div> -->
      </Card>
    </a-col>
  </a-row>
  <!-- 新生儿区域占比 -->
  <XsrQyzbModal ref="xsrQyzbModalRef" />
  <!-- 在读小学生性别数量 -->
  <ZdxxsModal ref="zdxxsModalRef" />
  <!-- 公铁航铁路数据 -->
  <GthTlModal ref="gthTlModalRef" />
  <!-- 航空客流量 -->
  <HyyhsModal ref="hyyhsModalRef" />
  <!-- 辖区人口情况 -->
  <XqrkqkModal ref="xqrkqkModalRef" />
  <!-- 师市人口情况 -->
  <SsrkqkModal ref="ssrkqkModalRef" />
  <!-- 公铁航航空数据 -->
  <GthHkModal ref="gthHkModalRef" />
  <!-- 公铁航公路数据 -->
  <GthGlModal ref="gthGlModalRef" />
  <!-- 公铁航航空客座率 -->
  <GthHkgkModal ref="gthHkgkModalRef" />
  <!-- 规上企业情况 -->
  <SsrkqkGsygModal ref="ssrkqkGsygModalRef" />
</template>
<script lang="ts" setup>
import { onMounted, onUnmounted, reactive, ref } from 'vue'
import Card from './card.vue'
import * as echarts from 'echarts'
import { Apis } from '@/api'
import { useBigScreenStore } from '../store'
import * as utils from '../utils'
import MyDivider from './my-divider.vue'
import NumberAnimation from '@/components/number-animation.vue'
import XsrQyzbModal from '../modal/population/xsr-qyzb-modal.vue'
import ZdxxsModal from '../modal/population/zdxxs-modal.vue'
import GthTlModal from '../modal/population/gth-tl-modal.vue'
import HyyhsModal from '../modal/population/hyyhs-modal.vue'
import XqrkqkModal from '../modal/population/xqrkqk-modal.vue'
import SsrkqkModal from '../modal/population/ssrkqk-modal.vue'
import GthHkModal from '../modal/population/gth-hk-modal.vue'
import GthGlModal from '../modal/population/gth-gl-modal.vue'
import GthHkgkModal from '../modal/population/gth-hkgk-modal.vue'
import SsrkqkGsygModal from '../modal/population/ssrkqk-gsyg-modal.vue'
const emit = defineEmits(['mounted'])
const bigScreenStore = useBigScreenStore()
const xsrQyzbModalRef = ref<InstanceType<typeof XsrQyzbModal>>()
const zdxxsModalRef = ref<InstanceType<typeof ZdxxsModal>>()
const gthTlModalRef = ref<InstanceType<typeof GthTlModal>>()
const hyyhsModalRef = ref<InstanceType<typeof HyyhsModal>>()
const xqrkqkModalRef = ref<InstanceType<typeof XqrkqkModal>>()
const ssrkqkModalRef = ref<InstanceType<typeof SsrkqkModal>>()
const gthHkModalRef = ref<InstanceType<typeof GthHkModal>>()
const gthGlModalRef = ref<InstanceType<typeof GthGlModal>>()
const gthHkgkModalRef = ref<InstanceType<typeof GthHkgkModal>>()
const ssrkqkGsygModalRef = ref<InstanceType<typeof SsrkqkGsygModal>>()
let gthzflist = ref([
  {
    name: '公路',
    tb: null,
    hb: null,
    kylCount: 0,
  },
  {
    name: '铁路',
    tb: null,
    hb: null,
    kylCount: 0,
  },
  {
    name: '航空',
    tb: null,
    hb: null,
    kylCount: 0,
  },
])
// 新生儿概况
const xsrgk = reactive({
  year: '',
  quarter: '',
  lastYear: 0,
  lastQuarter: 0,
  childCount: 0,
  // 年度新生儿数量
  yearChildCount: 0,
  // 去年新生儿数量
  lastYearChildCount: 0,
  areas: [
    {
      name: '43团',
      boyCount: '325',
      girlCount: '318',
    },
    {
      name: '45团',
      boyCount: '315',
      girlCount: '308',
    },
    {
      name: '50团',
      boyCount: '335',
      girlCount: '328',
    },
    {
      name: '51团',
      boyCount: '345',
      girlCount: '338',
    },
    {
      name: '53团',
      boyCount: '455',
      girlCount: '448',
    },
  ],
  // 季度
  years: [
    {
      // 年份
      year: '2023',
      // 当前第几季度
      quarter: '一',
      // 当前季度数量
      boyCount: '325',
      girlCount: '318',
    },
    {
      year: '2023',
      quarter: '二',
      boyCount: '342',
      girlCount: '335',
    },
    {
      year: '2023',
      quarter: '三',
      boyCount: '338',
      girlCount: '342',
    },
    {
      year: '2023',
      quarter: '四',
      boyCount: '356',
      girlCount: '349',
    },
    {
      year: '2024',
      quarter: '一',
      boyCount: '345',
      girlCount: '338',
    },
    {
      year: '2024',
      quarter: '二',
      boyCount: '358',
      girlCount: '352',
    },
    {
      year: '2024',
      quarter: '三',
      boyCount: '352',
      girlCount: '351',
    },
    {
      year: '2024',
      quarter: '四',
      boyCount: '368',
      girlCount: '359',
    },
  ],
  // 同比增幅增长
  quarter2quarterRate: 0,
  year2yearRate: 0,
})

// 新生儿性别比例
const xsrgkByXbblOptions = reactive({
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)',
    // backgroundColor: 'rgba(0,0,0,0.7)',
    borderColor: 'rgba(255,255,255,0.3)',
    textStyle: {
      // color: '#fff',
      fontSize: 18,
    },
  },
  legend: {
    show: true,
    orient: 'horizontal',
    bottom: '5%',
    itemGap: 3, // 减小图例间距
    itemWidth: 10, // 减小图例标记的宽度
    itemHeight: 10, // 减小图例标记的高度
    textStyle: {
      fontSize: 12, // 减小图例文字大小
      // color: '#f0f0f0',
    },
  },
  series: [
    {
      name: '性别比例',
      type: 'pie',
      radius: '40%',
      data: [],
      label: {
        show: true,
        formatter: function (params: any) {
          // 格式化标签为：名称 (值) 百分比%
          return `${params.name}(${params.percent}%)`
        },
        // color: '#ffffff', // 设置字体颜色为白色
      },
      labelLine: {
        show: true,
        length: 4, // 第一段指示线长度
        length2: 4, // 第二段指示线长度
        smooth: true, // 指示线平滑
      },
      color: ['#4282ff', '#37e0cc'],
    },
  ],
})

// 新生儿区域占比
const xsrgkByQyzbOptions = reactive({
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)',
    // backgroundColor: 'rgba(0,0,0,0.7)',
    borderColor: 'rgba(255,255,255,0.3)',
    textStyle: {
      // color: '#fff',
      fontSize: 16,
    },
  },
  legend: {
    orient: 'horizontal',
    bottom: '0%',
    itemGap: 4, // 减小图例间距
    itemWidth: 10, // 减小图例标记的宽度
    itemHeight: 10, // 减小图例标记的高度
    textStyle: {
      fontSize: 18, // 减小图例文字大小
      // color: '#f0f0f0',
    },
  },
  series: [
    {
      name: '区域占比',
      type: 'pie',
      radius: '50%',
      data: xsrgk.areas.map((area) => ({
        value: area.boyCount + area.girlCount,
        name: area.name,
      })),
      label: {
        show: false, // 关闭指示线
      },
      labelLine: {
        show: false, // 关闭指示线
      },
      color: [
        '#5470c6',
        '#91cc75',
        '#fac858',
        '#ee6666',
        '#73c0de',
        '#3ba272',
        '#fc8452',
        '#9a60b4',
        '#ea7ccc',
        '#48b3bd',
      ],
    },
  ],
})

// 新生儿总数
const xsrgkByZsOptions = reactive({
  title: {
    text: '新生儿总数',
    left: 'center',
    top: '0%',
    textStyle: {
      fontSize: 16,
      // color: '#f8f8f8',
    },
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  legend: {
    orient: 'horizontal',
    bottom: '0%',
    itemGap: 3,
    itemWidth: 10,
    itemHeight: 10,
    textStyle: {
      fontSize: 12,
      // color: '#f0f0f0',
    },
    // data: [],
  },
  xAxis: {
    type: 'category',
    data: ['一季度', '二季度', '三季度', '四季度'],
    axisLabel: {
      fontSize: 12,
    },
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
  },
  yAxis: {
    type: 'value',
    name: '人',
    nameLocation: 'end',
    axisLabel: {
      fontSize: 12,
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        color: 'rgba(255,255,255,0.1)',
      },
    },
  },
  grid: {
    top: '26%',
    left: '2%',
    right: '2%',
    bottom: '15%',
    containLabel: true,
  },
  series: [],
})

// 在读小学生概况
const zdxxsgk = reactive({
  desc: '', // 截止2024年
  year: '',
  totalCount: 0,
  qnTotalCount: 0,
  year2yearRate: '',
  // 在读小学生数
  students: '452000',
})

//企业用工总数
const qyygzs1ByOptions = reactive({
  title: {
    text: '“四上”企业用工总数',
    left: 'center',
    top: '3%',
    textStyle: {
      fontSize: 16,
    },
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
    formatter: function (params) {
      let result = params[0].name + '<br/>'
      params.forEach((param) => {
        result +=
          param.seriesName +
          ': ' +
          param.value +
          (param.seriesName.includes('企业数') ? '家' : '人') +
          '<br/>'
      })
      return result
    },
  },
  legend: {
    orient: 'horizontal',
    bottom: '0%',
    itemGap: 3,
    itemWidth: 10,
    itemHeight: 10,
    textStyle: {
      fontSize: 12,
    },
    data: ['现有员工数', '“四上”企业数'],
  },
  grid: {
    top: '26%',
    left: '2%',
    right: '2%',
    bottom: '15%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      fontSize: 12,
    },
  },
  yAxis: [
    {
      type: 'value',
      name: '人',
      position: 'left',
      alignTicks: true,
      splitNumber: 5,
      min: 0,
      axisLabel: {
        fontSize: 12,
        formatter: '{value} 人',
      },
    },
    {
      type: 'value',
      name: '家',
      position: 'right',
      alignTicks: true,
      splitNumber: 5,
      min: 0,
      axisLabel: {
        fontSize: 12,
        formatter: '{value} 家',
      },
    },
  ],
  series: [
    {
      name: '现有员工数',
      data: [1202, 2002, 1501, 801, 70, 110, 130, 120, 200, 150, 80, 70],
      type: 'bar',
      radius: '100%',
      showSymbol: false,
      smooth: true,
      color: '#4282ff',
      yAxisIndex: 0, // 明确使用主Y轴
    },
    {
      name: '“四上”企业数',
      data: [110, 1861, 1641, 901, 80, 120, 180, 120, 200, 150, 80, 70],
      type: 'line',
      radius: '100%',
      yAxisIndex: 1, // 明确使用次Y轴
      showSymbol: true, // 显示数据点
      symbolSize: 6, // 数据点大小
      symbol: 'circle', // 数据点形状
      smooth: true,
      color: '#37e0cc',
      lineStyle: {
        width: 2, // 折线宽度
      },
    },
  ],
})
//企业用工总数
const qyygzs2ByOptions = reactive({
  title: {
    text: '规模以上工业用工数',
    left: 'center',
    top: '3%',
    textStyle: {
      fontSize: 16,
      // color: '#f8f8f8',
    },
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
    formatter: function (params) {
      let result = params[0].name + '<br/>'
      params.forEach((param) => {
        result +=
          param.seriesName +
          ': ' +
          param.value +
          (param.seriesName.includes('企业数') ? '家' : '人') +
          '<br/>'
      })
      return result
    },
  },
  legend: {
    orient: 'horizontal',
    bottom: '0%',
    itemGap: 3,
    itemWidth: 10,
    itemHeight: 10,
    textStyle: {
      fontSize: 12,
    },
    data: ['现有员工数', '“四上”企业数'],
  },
  grid: {
    top: '26%',
    left: '2%',
    right: '2%',
    bottom: '15%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      fontSize: 12,
    },
  },
  yAxis: [
    {
      type: 'value',
      name: '人',
      position: 'left',
      alignTicks: true,
      splitNumber: 5,
      min: 0,
      axisLabel: {
        fontSize: 12,
        formatter: '{value} 人',
      },
    },
    {
      type: 'value',
      name: '家',
      position: 'right',
      alignTicks: true,
      splitNumber: 5,
      min: 0,
      axisLabel: {
        fontSize: 12,
        formatter: '{value} 家',
      },
    },
  ],
  series: [
    {
      name: '现有员工数',
      data: [1202, 2002, 1501, 801, 70, 110, 130, 120, 200, 150, 80, 70],
      type: 'bar',
      radius: '100%',
      showSymbol: false,
      smooth: true,
      color: '#4282ff',
      yAxisIndex: 0, // 明确使用主Y轴
    },
    {
      name: '“四上”企业数',
      data: [110, 1861, 1641, 901, 80, 120, 180, 120, 200, 150, 80, 70],
      type: 'line',
      radius: '100%',
      yAxisIndex: 1, // 明确使用次Y轴
      showSymbol: true, // 显示数据点
      symbolSize: 6, // 数据点大小
      symbol: 'circle', // 数据点形状
      smooth: true,
      color: '#37e0cc',
      lineStyle: {
        width: 2, // 折线宽度
      },
    },
  ],
})
//企业用工总数
const qyygzs3ByOptions = reactive({
  title: {
    text: '有资质的建筑业用工数',
    left: 'center',
    top: '3%',
    textStyle: {
      fontSize: 16,
      // color: '#f8f8f8',
    },
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
    formatter: function (params) {
      let result = params[0].name + '<br/>'
      params.forEach((param) => {
        result +=
          param.seriesName +
          ': ' +
          param.value +
          (param.seriesName.includes('企业数') ? '家' : '人') +
          '<br/>'
      })
      return result
    },
  },
  legend: {
    orient: 'horizontal',
    bottom: '0%',
    itemGap: 3,
    itemWidth: 10,
    itemHeight: 10,
    textStyle: {
      fontSize: 12,
    },
    data: ['现有员工数', '“四上”企业数'],
  },
  grid: {
    top: '26%',
    left: '2%',
    right: '2%',
    bottom: '15%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      fontSize: 12,
    },
  },
  yAxis: [
    {
      type: 'value',
      name: '人',
      position: 'left',
      alignTicks: true,
      splitNumber: 5,
      min: 0,
      axisLabel: {
        fontSize: 12,
        formatter: '{value} 人',
      },
    },
    {
      type: 'value',
      name: '家',
      position: 'right',
      alignTicks: true,
      splitNumber: 5,
      min: 0,
      axisLabel: {
        fontSize: 12,
        formatter: '{value} 家',
      },
    },
  ],
  series: [
    {
      name: '现有员工数',
      data: [1202, 2002, 1501, 801, 70, 110, 130, 120, 200, 150, 80, 70],
      type: 'bar',
      radius: '100%',
      showSymbol: false,
      smooth: true,
      color: '#4282ff',
      yAxisIndex: 0, // 明确使用主Y轴
    },
    {
      name: '“四上”企业数',
      data: [110, 1861, 1641, 901, 80, 120, 180, 120, 200, 150, 80, 70],
      type: 'line',
      radius: '100%',
      yAxisIndex: 1, // 明确使用次Y轴
      showSymbol: true, // 显示数据点
      symbolSize: 6, // 数据点大小
      symbol: 'circle', // 数据点形状
      smooth: true,
      color: '#37e0cc',
      lineStyle: {
        width: 2, // 折线宽度
      },
    },
  ],
})

// 在读小学生概况
const zdxxsgkByOptions = reactive({
  title: {
    text: '性别数量',
    left: 'center',
    top: '0%',
    textStyle: {
      fontSize: 16,
      // color: '#f8f8f8',
    },
    onclick: function () {
      zdxxsModalRef.value?.setData({
        params: {
          year: zdxxsgk.year,
        },
      })
      zdxxsModalRef.value?.open()
      // alert('点击了查看区域占比');
    },
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  legend: {
    show: true,
    orient: 'horizontal',
    bottom: '0%',
    itemGap: 3,
    itemWidth: 10,
    itemHeight: 10,
    textStyle: {
      fontSize: 12,
      // color: '#f0f0f0',
    },
    data: ['男', '女'],
  },
  grid: {
    top: '20%',
    left: '6%',
    right: '6%',
    bottom: '20%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    data: ['男', '女'],
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      fontSize: 12,
    },
  },
  yAxis: {
    type: 'value',
    name: '人',
    nameLocation: 'end',
    axisLabel: {
      fontSize: 12,
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        color: 'rgba(255,255,255,0.1)',
      },
    },
  },
  series: [
    {
      name: '男',
      data: [],
      type: 'bar',
      // stack: 'total',
      color: '#336bd3',
      barWidth: '30%',
    },
    {
      name: '女',
      data: [],
      type: 'bar',
      // stack: 'total',
      color: '#37e0cc',
      barWidth: '30%',
    },
  ],
})

const zdxxsgknnblByOptions = reactive({
  title: {
    text: '男女比例',
    left: 'center',
    top: '5%',
    textStyle: {
      fontSize: 16,
      // color: '#f8f8f8',
    },
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)',
    // backgroundColor: 'rgba(0,0,0,0.7)',
    borderColor: 'rgba(255,255,255,0.3)',
    textStyle: {
      // color: '#fff',
      fontSize: 18,
    },
  },
  legend: {
    show: true,
    orient: 'horizontal',
    bottom: '5%',
    itemGap: 3, // 减小图例间距
    itemWidth: 10, // 减小图例标记的宽度
    itemHeight: 10, // 减小图例标记的高度
    textStyle: {
      fontSize: 12, // 减小图例文字大小
      // color: '#f0f0f0',
    },
  },
  series: [
    {
      name: '男女比例',
      type: 'pie',
      radius: '45%',
      data: [
        { value: 0, name: '男' },
        { value: 0, name: '女' },
      ],
      label: {
        show: true,
        formatter: function (params) {
          // 格式化标签为：序号. 名称 (值)
          return `${params.name} (${params.percent}%)`
        },
        // color: '#ffffff', // 设置字体颜色为白色
      },
      labelLine: {
        show: true,
        length: 4, // 第一段指示线长度
        length2: 4, // 第二段指示线长度
        smooth: true, // 指示线平滑
      },
      color: ['#4282ff', '#37e0cc'],
    },
  ],
})

const zdxxsgkgnjzbzrsByOptions = reactive({
  title: {
    text: '小学生总数',
    left: 'center',
    top: '3%',
    textStyle: {
      fontSize: 12,
      // color: '#f8f8f8',
    },
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  legend: {
    orient: 'horizontal',
    bottom: '4%',
    itemGap: 3,
    itemWidth: 10,
    itemHeight: 10,
    textStyle: {
      fontSize: 18,
      // color: '#f0f0f0',
    },
    data: ['年度总数'],
  },
  xAxis: {
    type: 'category',
    data: utils.genMonthArray(),
    axisLabel: {
      fontSize: 12,
    },
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
  },
  yAxis: {
    type: 'value',
    name: '人',
    nameLocation: 'end',
    axisLabel: {
      fontSize: 12,
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        color: 'rgba(255,255,255,0.1)',
      },
    },
  },
  grid: {
    top: '26%',
    left: '2%',
    right: '2%',
    bottom: '15%',
    containLabel: true,
  },
  series: [
    {
      name: '小学生总数',
      data: [], // 平稳增长，下降较少
      type: 'line',
      radius: '100%',
      showSymbol: false,
      smooth: true,
      color: '#ffc107',
    },
  ],
})

// 铁路数据
const tlsjByOptions = reactive({
  title: {
    ...utils.generateChartTitle('铁路客运量'),
    top: '0%',
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'line',
      lineStyle: {
        type: 'dashed',
      },
    },
    formatter: function (params: any[]) {
      return (
        params[0].name +
        '<br/>' +
        params
          .map((item) => {
            return `${item.marker} ${item.seriesName}: ${item.value}`
          })
          .join('<br/>')
      )
    },
  },
  legend: {
    orient: 'horizontal',
    bottom: '0%',
    itemGap: 3,
    itemWidth: 10,
    itemHeight: 10,
    textStyle: {
      fontSize: 12,
      // color: '#f0f0f0',
    },
    data: [], // '2024年', '2023年'
  },
  grid: {
    left: '0%',
    top: '20%',
    right: '5%',
    bottom: '12%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    axisLabel: {
      fontSize: 12,
    },
  },
  yAxis: {
    type: 'value',
    name: '人次',
    axisLabel: {
      fontSize: 12,
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        color: 'rgba(255,255,255,0.1)',
      },
    },
  },
  series: [],
})

// 公路数据
const glsjByOptions = reactive({
  title: {
    ...utils.generateChartTitle('公路客运量'),
    top: '0%',
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'line',
      lineStyle: {
        type: 'dashed',
      },
    },
    formatter: function (params: any[]) {
      return (
        params[0].name +
        '<br/>' +
        params
          .map((item) => {
            return `${item.marker} ${item.seriesName}: ${item.value}`
          })
          .join('<br/>')
      )
    },
  },
  legend: {
    orient: 'horizontal',
    bottom: '0%',
    itemGap: 3,
    itemWidth: 10,
    itemHeight: 10,
    textStyle: {
      fontSize: 12,
      // color: '#f0f0f0',
    },
    data: [], // '2024年', '2023年'
  },
  grid: {
    left: '0%',
    top: '20%',
    right: '5%',
    bottom: '12%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    axisLabel: {
      fontSize: 12,
    },
  },
  yAxis: {
    type: 'value',
    name: '万人次',
    nameLocation: 'end',
    axisLabel: {
      fontSize: 12,
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        color: 'rgba(255,255,255,0.1)',
      },
    },
  },
  series: [],
})

const hksjByOptions = reactive({
  title: {
    ...utils.generateChartTitle('航空客运量'),
    top: '0%',
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  legend: {
    orient: 'horizontal',
    bottom: '0%',
    itemGap: 3,
    itemWidth: 10,
    itemHeight: 10,
    textStyle: {
      fontSize: 12,
      // color: '#f0f0f0',
    },
    data: [], // '2024年', '2023年'
  },
  grid: {
    left: '0%',
    top: '20%',
    right: '5%',
    bottom: '12%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    axisLabel: {
      fontSize: 12,
    },
  },
  yAxis: {
    type: 'value',
    name: '人次',
    nameLocation: 'end',
    axisLabel: {
      fontSize: 12,
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        color: 'rgba(255,255,255,0.1)',
      },
    },
  },
  series: [],
})
// 航空数据
const hkysj = reactive({
  desc: '', // 截止2024年10月
  year: '',
  month: '2024-12',
  // 总驾次同比
  totalFlightsYear2Year: 0,
  /** 进港人数 */
  inboundPassengers: 0,
  /** 出港人数 */
  outboundPassengers: 0,
  /** 疆内旅客 */
  internalPassengers: 0,
  // 疆外旅客
  externalPassengers: 0,
})

// 查看明细
const opanDetail = (text: string) => {
  switch (text) {
    case '在读小学生概况':
      zdxxsModalRef.value?.setData({
        params: {
          year: zdxxsgk.year,
        },
      })
      zdxxsModalRef.value?.open()
      break
    case '新生儿概况':
      xsrQyzbModalRef.value?.setData({
        params: {
          year: xsrgk.year,
          quarter: xsrgk.quarter,
        },
      })
      xsrQyzbModalRef.value?.open()
      break
    case '企业数据':
      ssrkqkGsygModalRef.value?.setData({
        params: {
          year: gsygqk.year,
          month: gsygqk.month,
        },
      })
      ssrkqkGsygModalRef.value?.open()
      break
    case '航空':
      gthHkModalRef.value?.setData({
        params: {
          year: gthsj.year,
          month: gthsj.month,
        },
      })
      gthHkModalRef.value?.open()
      break
    case '公路':
      gthGlModalRef.value?.setData({
        params: {
          year: gthsj.year,
          month: gthsj.month,
        },
      })
      gthGlModalRef.value?.open()
      break
    case '铁路':
      gthTlModalRef.value?.setData({
        params: {
          year: gthsj.year,
          month: gthsj.month,
        },
      })
      gthTlModalRef.value?.open()
      break

    default:
      break
  }
}

/** 新生儿性别比例 */
function initsrgkByXbblChart() {
  const chartDom = document.getElementById('xsrgkByXbbl')
  if (!chartDom) return
  const myChart = echarts.init(chartDom)

  myChart.setOption(xsrgkByXbblOptions)
}

/** 新生儿总数 */
function initsrgkByZsChart() {
  const chartDom = document.getElementById('xsrgkByZs')
  if (!chartDom) return
  let myChart = echarts.getInstanceByDom(chartDom)
  if (!myChart) {
    // 如果实例不存在，则初始化
    myChart = echarts.init(chartDom)
  }

  myChart.setOption(xsrgkByZsOptions, { notMerge: true })
}

function initZdxxsgkByOptionsChart() {
  const chartDom = document.getElementById('zdxxsgk')
  if (!chartDom) return
  let myChart = echarts.getInstanceByDom(chartDom)
  if (!myChart) {
    myChart = echarts.init(chartDom)
  }
  myChart.setOption(zdxxsgkByOptions, { notMerge: true })
}

function initQyygzs1ByOptionsChart() {
  const chartDom = document.getElementById('qyygzs1')
  if (!chartDom) return
  let myChart = echarts.getInstanceByDom(chartDom)
  if (!myChart) {
    myChart = echarts.init(chartDom)
  }
  myChart.setOption(qyygzs1ByOptions, { notMerge: true })
}
function initQyygzs2ByOptionsChart() {
  const chartDom = document.getElementById('qyygzs2')
  if (!chartDom) return
  let myChart = echarts.getInstanceByDom(chartDom)
  if (!myChart) {
    myChart = echarts.init(chartDom)
  }
  myChart.setOption(qyygzs2ByOptions, { notMerge: true })
}
function initQyygzs3ByOptionsChart() {
  const chartDom = document.getElementById('qyygzs3')
  if (!chartDom) return
  let myChart = echarts.getInstanceByDom(chartDom)
  if (!myChart) {
    myChart = echarts.init(chartDom)
  }
  myChart.setOption(qyygzs3ByOptions, { notMerge: true })
}

function initZdxxsgknvblByOptionsChart() {
  const chartDom = document.getElementById('zdxxsgknnbl')
  if (!chartDom) return
  let myChart = echarts.getInstanceByDom(chartDom)
  if (!myChart) {
    myChart = echarts.init(chartDom)
  }
  myChart.setOption(zdxxsgknnblByOptions, { notMerge: true })
}

function iniZdxxsgkgnjzbzrsByOptionsChart() {
  const chartDom = document.getElementById('zdxxsgkgnjzbzrs')
  if (!chartDom) return
  let myChart = echarts.getInstanceByDom(chartDom)
  if (!myChart) {
    myChart = echarts.init(chartDom)
  }
  myChart.setOption(zdxxsgkgnjzbzrsByOptions, { notMerge: true })
}

/** 铁路数据 */
function initTlsjByOptionsChart() {
  const chartDom = document.getElementById('tlsj')
  if (!chartDom) return
  let myChart = echarts.getInstanceByDom(chartDom)
  if (!myChart) {
    myChart = echarts.init(chartDom)
  }
  myChart.setOption(tlsjByOptions, { notMerge: true })
}
/** 航空数据 */
function initHksjByOptionsChart() {
  const chartDom = document.getElementById('hksj')
  if (!chartDom) return
  let myChart = echarts.getInstanceByDom(chartDom)
  if (!myChart) {
    myChart = echarts.init(chartDom)
  }
  myChart.setOption(hksjByOptions, { notMerge: true })
}

/** 公路数据 */
function initGlsjByOptionsChart() {
  const chartDom = document.getElementById('glsj')
  if (!chartDom) return
  let myChart = echarts.getInstanceByDom(chartDom)
  if (!myChart) {
    myChart = echarts.init(chartDom)
  }
  myChart.setOption(glsjByOptions, { notMerge: true })
}

/** 辖区人口情况 */
const xqrkqk = reactive({
  year: '',
  week: '',
  weekStatistics: {
    qnTotalCount: 0,
    totalCountRate: 0,
    qnZcCount: 0,
    hjCount: 0,
    hjCountRate: 0,
    flowOutCount: 0,
    qnFlowInCount: 0,
    qnFlowOutCount: 0,
    zcCount: 0,
    totalCount: 0,
    qnHjCount: 0,
    flowInCount: 0,
    flowInCountRate: 0, // 同比
    flowOutCountRate: 0, // 同比
    sgyFlowInCount: 0,
    flowInCountRate2: 0, // 环比
    sgyFlowOutCount: 0,
    flowOutCountRate2: 0, // 环比
  },
})

async function loadDataByXqrkqk(isInit = false) {
  if (!isInit) {
    bigScreenStore.showLoading()
  }
  try {
    let year, week
    if (xqrkqk.year && xqrkqk.week) {
      year = xqrkqk.year
      week = xqrkqk.week
    } else {
      const res = await Apis.szbt.populationData.get_getNewestData({})
      ;({ year, week } = res || {})
    }

    xqrkqk.year = year
    xqrkqk.week = week

    // const month = dayjs().year(year).week(week).month() + 1; // 获取月份，dayjs的week从0开始，month从0开始，所以需要+1
    // const month = Math.ceil(Number(week) / 4); // 根据周次计算月份，每4周为1个月

    const getChartDataRes = await Apis.szbt.populationData.get_getChartData({
      params: {
        year: xqrkqk.year,
        month: 12,
        week: xqrkqk.week,
      },
    })

    xqrkqk.weekStatistics = getChartDataRes.weekStatistics || {}

    // 辖区进入人数 同比
    {
      const currentFlowInCount = getChartDataRes?.weekStatistics?.flowInCount || 0
      const lastYearFlowInCount = getChartDataRes?.weekStatistics?.qnFlowInCount || 0
      if (lastYearFlowInCount) {
        xqrkqk.weekStatistics.flowInCountRate = Number(
          (((currentFlowInCount - lastYearFlowInCount) / lastYearFlowInCount) * 100).toFixed(2),
        )
      } else {
        xqrkqk.weekStatistics.flowInCountRate = '/'
      }
    }
    // 辖区进入人数 环比
    {
      const currentFlowInCount = getChartDataRes?.weekStatistics?.flowInCount || 0
      const lastYearFlowInCount = getChartDataRes?.weekStatistics?.sgyFlowInCount || 0
      if (lastYearFlowInCount) {
        xqrkqk.weekStatistics.flowInCountRate2 = Number(
          (((currentFlowInCount - lastYearFlowInCount) / lastYearFlowInCount) * 100).toFixed(2),
        )
      } else {
        xqrkqk.weekStatistics.flowInCountRate2 = '/'
      }
    }

    // 辖区外出人数 同比
    {
      const currentFlowOutCount = getChartDataRes?.weekStatistics?.flowOutCount || 0
      const lastYearFlowOutCount = getChartDataRes?.weekStatistics?.qnFlowOutCount || 0
      if (lastYearFlowOutCount) {
        xqrkqk.weekStatistics.flowOutCountRate = Number(
          (((currentFlowOutCount - lastYearFlowOutCount) / lastYearFlowOutCount) * 100).toFixed(2),
        )
      } else {
        xqrkqk.weekStatistics.flowOutCountRate = '/'
      }
    }

    // 辖区外出人数 环比
    {
      const currentFlowOutCount = getChartDataRes?.weekStatistics?.flowOutCount || 0
      const lastYearFlowOutCount = getChartDataRes?.weekStatistics?.sgyFlowOutCount || 0
      if (lastYearFlowOutCount) {
        xqrkqk.weekStatistics.flowOutCountRate2 = Number(
          (((currentFlowOutCount - lastYearFlowOutCount) / lastYearFlowOutCount) * 100).toFixed(2),
        )
      } else {
        xqrkqk.weekStatistics.flowOutCountRate2 = '/'
      }
    }
  } catch (error) {
  } finally {
    if (!isInit) {
      bigScreenStore.hideLoading()
    }
  }
}

const gsygqk = reactive({
  year: '',
  month: '',
  count: {
    ygCount: 0,
    ygCountTb: 0,
    ygCountHb: 0,
    qyCount: 0,
    qyCountTb: 0,
    qyCountHb: 0,
  },
})

/** 公铁航客运数据 */
const gthsj = reactive({
  year: '',
  month: '',
})

async function loadDataByGthsj(isInit = false) {
  if (!isInit) {
    bigScreenStore.showLoading()
  }

  try {
    let year, month
    if (gthsj.year && gthsj.month) {
      year = gthsj.year
      month = gthsj.month
    } else {
      const getNewestDataRes = await Apis.szbt.land.get_getNewestData({
        params: {
          flag: 0,
        },
      })
      ;({ year, month } = utils.parseDate(getNewestDataRes.newestDate))
    }

    gthsj.year = year.toString()
    gthsj.month = month.toString()

    // 客运量情况
    {
      const getAllKylChartDataRes = await Apis.szbt.land.get_getAllKylChartData({
        params: {
          year: year,
          month: month,
        },
      })
      // 固定类型列表（按目标顺序）
      const order = ['公路', '铁路', '航空']

      // 1. 补全缺失类型
      order.forEach((type) => {
        if (!getAllKylChartDataRes.some((item) => item.name === type)) {
          getAllKylChartDataRes.push({
            year: '2025',
            name: type,
            hb: null,
            kylCount: 0,
            tb: null,
          })
        }
      })

      // 2. 按指定顺序排序
      getAllKylChartDataRes.sort((a, b) => {
        return order.indexOf(a.name) - order.indexOf(b.name)
      })
      console.log(getAllKylChartDataRes, '客运')
      gthzflist.value = getAllKylChartDataRes
    }

    // 铁路
    {
      const getChartDataRes = await Apis.szbt.land.get_getChartData({
        params: {
          year: gthsj.year,
          month: gthsj.month,
          flag: 0,
        },
      })
      console.log(getChartDataRes, '铁路')

      const { groupedData, sortedKeys } = utils.groupAndSortByField(getChartDataRes, 'year')

      const series = []

      Object.keys(groupedData).forEach((year, index) => {
        series.push({
          name: `${year}年`,
          type: 'line',
          showSymbol: false,
          smooth: true,
          areaStyle: {
            opacity: 0.15,
          },
          emphasis: {
            focus: 'series',
          },
          color: utils.genColors()[index],
          data: groupedData[year].map((item) => {
            return {
              value: item.passengerVolume,
              name: item.month + '月',
            }
          }),
        })
      })

      tlsjByOptions.series = series
      tlsjByOptions.legend.data = sortedKeys.map((year) => `${year}年`)

      const maxData = []
      tlsjByOptions.series.map((item: any) => {
        item.data.map((v: any) => {
          maxData.push(v.value)
        })
      })
      const maxVal = Math.max(...maxData)
      const yMax = roundUpToPrecision(maxVal)
      tlsjByOptions.yAxis.max = yMax
      tlsjByOptions.yAxis.splitNumber = 5
      initTlsjByOptionsChart()
    }
    // 航空
    {
      const getChartDataRes = await Apis.szbt.aviation.get_getAviationChartDataYear({
        params: {
          year: gthsj.year,
          month: gthsj.month,
        },
      })
      console.log(getChartDataRes.barChartData, '航空')
      console.log(gthsj.year, 'gthsj.year')
      console.log(gthsj.month, 'gthsj.month')

      const { groupedData, sortedKeys } = utils.groupAndSortByField(
        getChartDataRes.barChartData,
        'year',
      )
      const series = []

      Object.keys(groupedData).forEach((year, index) => {
        series.push({
          name: `${year}年`,
          type: 'line',
          showSymbol: false,
          smooth: true,
          areaStyle: {
            opacity: 0.15,
          },
          emphasis: {
            focus: 'series',
          },
          color: utils.genColors()[index],
          data: groupedData[year].map((item) => {
            return {
              value: item.passengerVolume,
              name: item.month + '月',
            }
          }),
        })
      })

      hksjByOptions.series = series
      hksjByOptions.legend.data = sortedKeys.map((year) => `${year}年`)
      const maxData = []
      hksjByOptions.series.map((item: any) => {
        item.data.map((v: any) => {
          maxData.push(v.value)
        })
      })
      const maxVal = Math.max(...maxData)
      const yMax = roundUpToPrecision(maxVal, 10000)
      hksjByOptions.yAxis.max = yMax
      hksjByOptions.yAxis.splitNumber = 5
      initHksjByOptionsChart()
    }

    // 公路
    {
      const getChartDataRes = await Apis.szbt.land.get_getChartData({
        params: {
          year: year,
          month: month,
          flag: 1,
        },
      })
      const { groupedData, sortedKeys } = utils.groupAndSortByField(getChartDataRes, 'year')

      const series = []

      Object.keys(groupedData).forEach((year, index) => {
        series.push({
          name: `${year}年`,
          type: 'line',
          showSymbol: false,
          smooth: true,
          areaStyle: {
            opacity: 0.15,
          },
          emphasis: {
            focus: 'series',
          },
          color: utils.genColors()[index],
          data: groupedData[year].map((item) => {
            return {
              value: item.passengerVolume,
              name: item.month + '月',
            }
          }),
        })
      })

      glsjByOptions.series = series
      glsjByOptions.legend.data = sortedKeys.map((year) => `${year}年`)

      const maxData = []
      glsjByOptions.series.map((item: any) => {
        item.data.map((v: any) => {
          maxData.push(v.value)
        })
      })
      const maxVal = Math.max(...maxData)
      const yMax = roundUpToPrecision(maxVal, 10)
      glsjByOptions.yAxis.max = yMax
      glsjByOptions.yAxis.splitNumber = 5
      initGlsjByOptionsChart()
    }
  } catch (error) {
  } finally {
    if (!isInit) {
      bigScreenStore.hideLoading()
    }
  }
}

async function loadDataByXsrgk(isInit = false) {
  if (!isInit) {
    bigScreenStore.showLoading()
  }
  try {
    let year, quarter
    if (xsrgk.year && xsrgk.quarter) {
      year = xsrgk.year
      quarter = xsrgk.quarter
    } else {
      const getNewestDataRes = await Apis.szbt.newBorn.get_getNewBornNewestData({})
      const res = utils.parseDate(getNewestDataRes.newestDate)
      year = res.year.toString()
      quarter = res.quarter.toString()
      console.log(getNewestDataRes, 'getNewestDataRes----------')
    }

    xsrgk.year = year.toString()
    xsrgk.quarter = quarter.toString()

    const getNewBornRes = await Apis.szbt.newBorn.get_getNewBorTjChartInfo({
      params: {
        searchYear: year,
      },
    })

    let yearArr = []
    let hbsj = {
      boyCount: 0,
      girlCount: 0,
      wzCount: 0,
    }
    getNewBornRes.map((item: any) => {
      if (xsrgk.quarter == '1') {
        if (item.year == Number(xsrgk.year) - 1) {
          if (item.quarter == 4) {
            hbsj = item
          }
        }
      } else {
        if (item.quarter == Number(xsrgk.quarter) - 1 && item.year == xsrgk.year) {
          hbsj = item
        }
      }
    })
    let tbsj = {
      boyCount: 0,
      girlCount: 0,
      wzCount: 0,
    }
    getNewBornRes.map((item: any) => {
      if (item.year == Number(xsrgk.year) - 1 && item.quarter == xsrgk.quarter) {
        tbsj = item
      }
    })

    if (getNewBornRes.length > 0) {
      yearArr = getNewBornRes
        .map((item) => {
          if (item.year == year && item.quarter <= quarter) {
            return item
          }
        })
        .filter((item) => item !== undefined)
    } else {
      yearArr = [year, year - 1]
    }
    xsrgk.yearChildCount = 0
    getNewBornRes.map((item: any) => {
      if (item.year == year) {
        xsrgk.yearChildCount += item.boyCount + item.girlCount + item.wzCount
      }
    })
    const lastYearArr = getNewBornRes
      .map((item) => {
        // if (item.year == year - 1 && item.quarter <= quarter) {
        if (item.year == year - 1) {
          return item
        }
      })
      .filter((item) => item !== undefined)

    xsrgk.lastYearChildCount = lastYearArr.reduce(
      (sum, item) => sum + item.boyCount + item.girlCount + item.wzCount,
      0,
    )
    if (xsrgk.lastYearChildCount) {
      xsrgk.year2yearRate = (
        ((xsrgk.yearChildCount - xsrgk.lastYearChildCount) / xsrgk.lastYearChildCount) *
        100
      ).toFixed(2)
    } else {
      xsrgk.year2yearRate = '/'
    }

    // 当年上季度新生儿数量
    const QuarterNewBornCount = tbsj.boyCount + tbsj.girlCount + tbsj.wzCount

    let yearInfo = getNewBornRes.find((item) => item.year == year && item.quarter == quarter)

    let lastYearInfo = {}

    if (yearInfo) {
      lastYearInfo = getNewBornRes.find(
        (item) => item.year == yearInfo.year - 1 && item.quarter == yearInfo.quarter,
      )
    }

    yearInfo = yearInfo || {
      year: year,
      quarter: quarter,
      boyCount: 0,
      girlCount: 0,
      wzCount: 0,
    }

    lastYearInfo = lastYearInfo || {
      year: yearInfo.year - 1,
      quarter: yearInfo.quarter,
      boyCount: 0,
      girlCount: 0,
      wzCount: 0,
    }

    // 当前季度新生儿数量
    const currentQuarterNewBornCount = yearInfo.boyCount + yearInfo.girlCount + yearInfo.wzCount
    if (QuarterNewBornCount) {
      // 计算增长率
      xsrgk.year1yearRate = (
        (((currentQuarterNewBornCount || 0) - (QuarterNewBornCount || 0)) / QuarterNewBornCount) *
        100
      ).toFixed(2)
    } else {
      xsrgk.year1yearRate = '/'
    }

    console.log(QuarterNewBornCount, '当年上季度新生儿数量-------------')
    console.log(currentQuarterNewBornCount, '当前季度新生儿数量-------------')
    console.log(xsrgk.year1yearRate, '同比增幅------------------------')

    // 上季度新生儿数量
    const lastQuarterNewBornCount = hbsj.boyCount + hbsj.girlCount + hbsj.wzCount

    if (lastQuarterNewBornCount) {
      // 计算增长率
      xsrgk.quarter2quarterRate = (
        (((currentQuarterNewBornCount || 0) - (lastQuarterNewBornCount || 0)) /
          lastQuarterNewBornCount) *
        100
      ).toFixed(2)
    } else {
      xsrgk.quarter2quarterRate = '/'
    }

    console.log(lastQuarterNewBornCount, '上季度新生儿数量-------------')
    console.log(currentQuarterNewBornCount, '当前季度新生儿数量-------------')
    console.log(xsrgk.quarter2quarterRate, '环比增幅-------------')

    // 最近年份和季度数据
    xsrgk.lastYear = yearInfo.year
    xsrgk.lastQuarter = yearInfo.quarter
    xsrgk.childCount = yearInfo.boyCount + yearInfo.girlCount + yearInfo.wzCount

    let getNewBornQyzbRes = await Apis.szbt.newBorn.get_selectNewBornQyzb({
      params: {
        searchYear: year,
        quarter: quarter,
      },
    })

    // 按照男女总数倒序排序
    getNewBornQyzbRes = getNewBornQyzbRes
      .map((item) => ({
        ...item,
        total: item.boyCount + item.girlCount,
      }))
      .sort((a, b) => b.total - a.total)

    xsrgkByXbblOptions.title = {
      ...utils.generateChartTitle(utils.numberToChinese(xsrgk.quarter) + '季度新生儿性别比例'),
      top: '0%',
    }
    xsrgkByXbblOptions.series[0].data = [
      { value: yearInfo.boyCount, name: '男' },
      { value: yearInfo.girlCount, name: '女' },
    ]

    initsrgkByXbblChart()

    xsrgkByQyzbOptions.title = {
      ...utils.generateChartTitle(utils.numberToChinese(xsrgk.lastQuarter) + '季度新生儿区域占比'),
      top: '5%',
    }

    const areaNames = getNewBornQyzbRes.map((item) => item.name)
    const halfLength = Math.ceil(areaNames.length / 2) // 向上取整,优先放在左边
    let newGetNewBornRes = getNewBornRes.sort((a, b) => {
      return a.quarter - b.quarter
    })
    console.log(newGetNewBornRes, 'newGetNewBornRes---------')
    const { groupedData, sortedKeys } = utils.groupAndSortByField(newGetNewBornRes, 'year')
    xsrgkByQyzbOptions.legend = [
      {
        orient: 'vertical', // 垂直排列
        left: 'left', // 图例放在左侧
        top: 'middle', // 垂直居中
        data: areaNames.slice(0, halfLength), // 左侧显示前半部分
        itemGap: 4, // 减小图例间距
        itemWidth: 10, // 减小图例标记的宽度
        itemHeight: 10, // 减小图例标记的高度
        textStyle: {
          fontSize: 18, // 减小图例文字大小
          // color: '#f0f0f0',
        },
        formatter: function (name) {
          const data = getNewBornQyzbRes.slice(0, halfLength)
          const item = data.find((d) => d.name === name)
          const index = data.indexOf(item) + 1
          const total = getNewBornQyzbRes.reduce((sum, cur) => sum + cur.total, 0)
          const percentage = ((item.total / total) * 100).toFixed(1)
          return `${index}. ${name} (${item.total}人)`
        },
      },
      {
        orient: 'vertical', // 垂直排列
        right: 'right', // 图例放在右侧
        top: 'middle', // 垂直居中
        data: getNewBornQyzbRes.slice(halfLength), // 右侧显示后半部分
        itemGap: 4, // 减小图例间距
        itemWidth: 10, // 减小图例标记的宽度
        itemHeight: 10, // 减小图例标记的高度
        textStyle: {
          fontSize: 18, // 减小图例文字大小
          // color: '#f0f0f0',
        },
        formatter: function (name) {
          const data = getNewBornQyzbRes.slice(halfLength)
          const item = data.find((d) => d.name === name)
          const index = halfLength + data.indexOf(item) + 1
          const total = getNewBornQyzbRes.reduce((sum, cur) => sum + cur.total, 0)
          const percentage = ((item.total / total) * 100).toFixed(1)
          return `${index}. ${name} (${item.total}人)`
        },
      },
    ]
    xsrgkByQyzbOptions.series[0].data = getNewBornQyzbRes.map((item) => ({
      value: item.boyCount + item.girlCount,
      name: item.name,
    }))

    xsrgkByQyzbOptions.series[0].data = xsrgkByQyzbOptions.series[0].data

    const series1: any[] = []
    Object.keys(groupedData).forEach((year, index) => {
      series1.push({
        name: `${year}年`,
        type: 'bar',
        radius: '100%',
        showSymbol: false,
        smooth: true,
        color: utils.genColors()[index],
        data: groupedData[year].map((item) => {
          return {
            value: item.boyCount + item.girlCount,
            name: item.quarter + '季度',
          }
        }),
      })
    })

    xsrgkByZsOptions.series = series1
    xsrgkByZsOptions.legend.data = sortedKeys.map((year) => `${year}年`)

    const maxData = []
    xsrgkByZsOptions.series.map((item: any) => {
      item.data.map((v: any) => {
        maxData.push(v.value)
      })
    })
    const maxVal = Math.max(...maxData)
    const yMax = roundUpToPrecision(maxVal, 1000)
    xsrgkByZsOptions.yAxis.max = yMax
    xsrgkByZsOptions.yAxis.splitNumber = 5
    initsrgkByZsChart()
  } catch (error) {
  } finally {
    if (!isInit) {
      bigScreenStore.hideLoading()
    }
  }
}

const sssrkqk = reactive({
  year: '',
  month: '',
  monthStatistics: {
    sgyTotalCount: 0,
    hjCountRate2: 0,
    totalCountRate2: 0,
    qnTotalCount: 0,
    totalCountRate: 0,
    qnZcCount: 0,
    hjCount: 0,
    hjCountRate: 0,
    flowOutCount: 0,
    flowOutCountRate: 0,
    qnFlowInCount: 0,
    qnFlowOutCount: 0,
    zcCount: 0,
    totalCount: 0,
    qnHjCount: 0,
    flowInCount: 0,
    flowInCountRate: 0,
    zcCountRate: 0,
    zcCountRate2: 0,
  },
})

async function loadDataBySssrkqk(isInit = false) {
  if (!isInit) {
    bigScreenStore.showLoading()
  }
  try {
    let year, month

    if (sssrkqk.year && sssrkqk.month) {
      year = sssrkqk.year
      month = sssrkqk.month
    } else {
      const res = await Apis.szbt.populationData.get_getNewestData({})
      year = res.year.toString()
      month = res.month.toString()
    }

    sssrkqk.year = year.toString()
    sssrkqk.month = month.toString()

    const getChartDataRes = await Apis.szbt.populationData.get_getChartData({
      params: {
        year: sssrkqk.year,
        month: sssrkqk.month,
        week: 0,
      },
    })

    sssrkqk.monthStatistics = getChartDataRes.monthStatistics

    // 总人口 totalCount
    {
      const currentTotalCount = getChartDataRes?.monthStatistics?.zcCount || 0
      const lastYearTotalCount = getChartDataRes?.monthStatistics?.qnZcCount || 0
      if (lastYearTotalCount) {
        sssrkqk.monthStatistics.zcCountRate = Number(
          (((currentTotalCount - lastYearTotalCount) / lastYearTotalCount) * 100).toFixed(2),
        )
      } else {
        sssrkqk.monthStatistics.zcCountRate = '/'
      }
    }

    {
      const currentTotalCount = getChartDataRes?.monthStatistics?.zcCount || 0
      const lastYearTotalCount = getChartDataRes?.monthStatistics?.sgyZcCount || 0
      if (lastYearTotalCount) {
        sssrkqk.monthStatistics.zcCountRate2 = Number(
          (((currentTotalCount - lastYearTotalCount) / lastYearTotalCount) * 100).toFixed(2),
        )
      } else {
        sssrkqk.monthStatistics.zcCountRate2 = '/'
      }
    }
    // 户籍人口同比
    {
      const currentHJCount = getChartDataRes?.monthStatistics?.hjCount || 0
      const lastYearHJCount = getChartDataRes?.monthStatistics?.qnHjCount || 0
      if (lastYearHJCount) {
        sssrkqk.monthStatistics.hjCountRate = Number(
          (((currentHJCount - lastYearHJCount) / lastYearHJCount) * 100).toFixed(2),
        )
      } else {
        sssrkqk.monthStatistics.hjCountRate = '/'
      }
    }
    {
      const currentHJCount = getChartDataRes?.monthStatistics?.hjCount || 0
      const lastYearHJCount = getChartDataRes?.monthStatistics?.sgyHjCount || 0
      if (lastYearHJCount) {
        sssrkqk.monthStatistics.hjCountRate2 = Number(
          (((currentHJCount - lastYearHJCount) / lastYearHJCount) * 100).toFixed(2),
        )
      } else {
        sssrkqk.monthStatistics.hjCountRate2 = '/'
      }
    }

    // 流入人口同比
    {
      const currentFlowInCount = getChartDataRes?.monthStatistics?.flowInCount || 0
      const lastYearFlowInCount = getChartDataRes?.monthStatistics?.qnFlowInCount || 0
      if (lastYearFlowInCount) {
        sssrkqk.monthStatistics.flowInCountRate = Number(
          (((currentFlowInCount - lastYearFlowInCount) / lastYearFlowInCount) * 100).toFixed(2),
        )
      } else {
        sssrkqk.monthStatistics.flowInCountRate = '/'
      }
    }

    // 流出人口同比
    {
      const currentFlowOutCount = getChartDataRes?.monthStatistics?.flowOutCount || 0
      const lastYearFlowOutCount = getChartDataRes?.monthStatistics?.qnFlowOutCount || 0
      if (lastYearFlowOutCount) {
        sssrkqk.monthStatistics.flowOutCountRate = Number(
          (((currentFlowOutCount - lastYearFlowOutCount) / lastYearFlowOutCount) * 100).toFixed(2),
        )
      } else {
        sssrkqk.monthStatistics.flowOutCountRate = '/'
      }
    }
  } catch (error) {
  } finally {
    if (!isInit) {
      bigScreenStore.hideLoading()
    }
  }
}

const sssrkhj = reactive({
  year: '',
  months: [],
})

async function loadDataBySssrkhj(isInit = false) {
  if (!isInit) {
    bigScreenStore.showLoading()
  }
  try {
    let year
    // debugger
    if (sssrkhj.year) {
      year = sssrkhj.year
    } else {
      const res = await Apis.szbt.populationData.get_getNewestData({})
      year = res.year.toString()
    }

    sssrkhj.year = year.toString()

    const getChartDataRes = await Apis.szbt.populationData.get_getChartData({
      params: { year: sssrkhj.year, month: 12, week: 0 },
    })

    sssrkhj.months = getChartDataRes?.months || []
  } catch (error) {
  } finally {
    if (!isInit) {
      bigScreenStore.hideLoading()
    }
  }
}

async function loadDataByXxsgk(isInit = false) {
  if (!isInit) {
    bigScreenStore.showLoading()
  }
  try {
    let year
    if (zdxxsgk.year) {
      year = zdxxsgk.year
    } else {
      const getNewestDataRes = await Apis.szbt.pupil.get_getNewestData({})

      ;({ year } = utils.parseDate(getNewestDataRes.newestDate))
      zdxxsgk.year = year.toString()
    }

    // zdxxsgk.desc = `截止${getNewestDataRes.newestDate}年12月`

    const getChartDataRes = await Apis.szbt.pupil.get_getPupilStatisticsChartData({
      params: {
        year: year,
      },
    })

    zdxxsgk.qnTotalCount = getChartDataRes.qnTotalCount
    zdxxsgk.totalCount = getChartDataRes.totalCount
    if (zdxxsgk.qnTotalCount) {
      zdxxsgk.year2yearRate = Number(
        (((zdxxsgk.totalCount - zdxxsgk.qnTotalCount) / zdxxsgk.qnTotalCount) * 100).toFixed(2),
      )
    } else {
      zdxxsgk.year2yearRate = '/'
    }

    if (getChartDataRes.barData.length > 0) {
      const order = ['六年级', '五年级', '四年级', '三年级', '二年级', '一年级']
      getChartDataRes.barData.sort(
        (a: any, b: any) => order.indexOf(a.grade) - order.indexOf(b.grade),
      )
      // zdxxsgkByOptions.xAxis.data = getChartDataRes.barData.map((item) => item.grade)
      zdxxsgkByOptions.xAxis.data = order
      zdxxsgkByOptions.series[0].data = getChartDataRes.barData.map((item) => ({
        value: item.boyCount,
        name: item.grade,
      }))

      zdxxsgkByOptions.series[1].data = getChartDataRes.barData.map((item) => ({
        value: item.girlCount,
        name: item.grade,
      }))
    } else {
      zdxxsgkByOptions.series[0].data = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
      zdxxsgkByOptions.series[1].data = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
    }
    const maxData = []
    zdxxsgkByOptions.series.map((item: any) => {
      item.data.map((v: any) => {
        maxData.push(v.value)
      })
    })
    const maxVal = Math.max(...maxData)
    const yMax = roundUpToPrecision(maxVal, 1000)
    zdxxsgkByOptions.yAxis.max = yMax
    zdxxsgkByOptions.yAxis.splitNumber = 5
    zdxxsgknnblByOptions.series[0].data = [
      { value: getChartDataRes.boyCount || 0, name: '男' },
      { value: getChartDataRes.girlCount || 0, name: '女' },
    ]

    zdxxsgkgnjzbzrsByOptions.xAxis.data = getChartDataRes.oldYear.map((item) => item.year)
    zdxxsgkgnjzbzrsByOptions.series[0].data = getChartDataRes.oldYear.map(
      (item) => item.total_count,
    )

    initZdxxsgkByOptionsChart()
    initZdxxsgknvblByOptionsChart()
    iniZdxxsgkgnjzbzrsByOptionsChart()
  } catch (error) {
  } finally {
    if (!isInit) {
      bigScreenStore.hideLoading()
    }
  }
}

async function loadData() {
  bigScreenStore.showLoading()

  try {
    await Promise.all([
      loadDataByGsygqk(),
      loadDataByXsrgk(),
      loadDataBySssrkqk(),
      loadDataByXqrkqk(),
      loadDataBySssrkhj(),
      loadDataByGthsj(),

      loadDataByXxsgk(),
    ])
  } catch (error) {
  } finally {
    bigScreenStore.hideLoading()
  }
}

async function loadDataByGsygqk(isInit = false) {
  if (!isInit) {
    bigScreenStore.showLoading()
  }
  try {
    let year, month

    if (gsygqk.year && gsygqk.month) {
      year = gsygqk.year
      month = gsygqk.month
      console.log(year, 'year111')
      console.log(month, 'month111')
    } else {
      const res = await Apis.szbt.populationQyData.get_getNewestData({})
      year = res.year
      month = res.mount
      console.log(year, 'year222')
      console.log(month, 'month222')
    }

    gsygqk.year = year.toString()
    gsygqk.month = month.toString()

    const getChartDataRes = await Apis.szbt.populationQyData.get_getChartData({
      params: {
        year: gsygqk.year,
        month: gsygqk.month,
      },
    })
    console.log(getChartDataRes, 'getChartDataRes')

    if (getChartDataRes.count.length > 0) {
      gsygqk.count = getChartDataRes.count[0] || {}
    } else {
      gsygqk.count = {
        ygCount: 0,
        ygCountTb: 0,
        ygCountHb: 0,
        qyCount: 0,
        qyCountTb: 0,
        qyCountHb: 0,
      }
    }

    if (getChartDataRes.dyList.length > 0) {
      qyygzs1ByOptions.series[0].data = getChartDataRes.dyList.map((item) => {
        return item.ygCount
      })
      qyygzs1ByOptions.series[1].data = getChartDataRes.dyList.map((item) => {
        return item.qyCount
      })
      qyygzs2ByOptions.series[0].data = getChartDataRes.dyList.map((item) => {
        return item.ygCount
      })
      qyygzs2ByOptions.series[1].data = getChartDataRes.dyList.map((item) => {
        return item.qyCount
      })
      qyygzs3ByOptions.series[0].data = getChartDataRes.dyList.map((item) => {
        return item.ygCount
      })
      qyygzs3ByOptions.series[1].data = getChartDataRes.dyList.map((item) => {
        return item.qyCount
      })
    } else {
      qyygzs1ByOptions.series[0].data = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
      qyygzs1ByOptions.series[1].data = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
      qyygzs2ByOptions.series[0].data = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
      qyygzs2ByOptions.series[1].data = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
      qyygzs3ByOptions.series[0].data = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
      qyygzs3ByOptions.series[1].data = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
    }
    initQyygzs1ByOptionsChart()
    initQyygzs2ByOptionsChart()
    initQyygzs3ByOptionsChart()
  } catch (error) {
  } finally {
    if (!isInit) {
      bigScreenStore.hideLoading()
    }
  }
}
// 智能大数向上取整
function roundUpToPrecision(num: number, precision = 100000) {
  return Math.ceil(num / precision) * precision
}
let timer: any

onMounted(async () => {
  await loadData()

  emit('mounted')
})

onUnmounted(() => {
  clearInterval(timer)
})
</script>

<style scoped>
div {
  box-sizing: border-box;
}

.slider-container {
  margin-bottom: 20px;
}

.slider-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.slider-label span {
  font-size: 18px;
}

.slider {
  position: relative;
  height: 6px;
  background-color: #2a2d3d;
  border-radius: 3px;
  cursor: pointer;
}

.slider-progress {
  position: absolute;
  height: 6px;
  border-radius: 3px;
}

.slider-container:nth-child(2) .slider-progress {
  background: linear-gradient(to right, rgba(45, 97, 183, 0.2), rgba(52, 128, 232, 1));
}

.slider-container:nth-child(3) .slider-progress {
  background: linear-gradient(to right, rgba(45, 97, 183, 0.2), rgba(4, 169, 219, 1));
}

.slider-container:nth-child(4) .slider-progress {
  background: linear-gradient(to right, rgba(45, 97, 183, 0.2), rgba(52, 128, 232, 1));
}

.slider-thumb {
  position: absolute;
  width: 18px;
  height: 18px;
  /* background-color: #fff; */
  border-radius: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
}

.slider:hover .slider-thumb {
  transform: translate(-50%, -50%) scale(1.2);
  box-shadow: 0 0 10px rgba(255, 255, 255, 1);
}

.left-panel,
.right-panel {
  border-radius: 8px;
  padding: 15px;
}

.left-panel {
  flex: 2;
  display: flex;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  flex-direction: column;
}

.right-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.p-data-item {
  background: rgba(170, 187, 204, 0.8);
  padding: 15px;
  border-radius: 6px;
  min-height: 80px;
  height: 120px;
  /* 调整最小高度 */
}

.value {
  /* color: #fff; */
  font-size: 24px;
  /* 缩小字号 */
  font-weight: bold;
  margin: 6px 0;
}

.label {
  /* color: #8e99a8; */
  font-size: 24px;
  margin-bottom: 4px;
}

.arrow {
  border-left: 3px solid transparent;
  /* 缩小箭头尺寸 */
  border-right: 3px solid transparent;
  margin-right: 3px;
}

.arrow-up {
  border-bottom: 5px solid #00c292;
}

.arrow-down {
  border-top: 5px solid #f8514f;
}

/* 新增样式 */
.section-title {
  /* color: #fff; */
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  padding-left: 18px;
  position: relative;
  display: flex;
  justify-content: space-between;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background: #3b82f6;
}

.full-row {
  width: 100%;
}

.grid-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.text-md {
  color: #999;
}
.unit {
  font-size: 12px;
  color: #999999;
  margin-left: 5px;
}
.valueNum-zf {
  color: #00bcc3;
}
.a-row-box {
  min-height: calc(100vh - 220px) !important;
}
</style>
